<template>
    <div>
      <el-alert v-if="tis" :title="tis" type="success" show-icon :closable="false"/>
       <el-table :data="this.tableData" :row-key="getRowKeys"
       @selection-change="handleSelectionChange"  ref="table" stripe>
          <tr v-for="(item, index) in this.tableLabel" :key="index">
            <el-table-column v-if="item.type==='checkbox'" :fixed="item.type==='checkbox'?'left':'none'" type="selection" width="55" :reserve-selection="true"></el-table-column>
            <el-table-column v-else-if="item.type==='createTime'" :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="formatDate"></el-table-column>
            <el-table-column v-else-if="item.type==='files'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                <el-button type="text" @click="filePreview(scope.row)">预览</el-button>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='rejectReason'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                  <div style="color:red">
                    {{ scope.row.rejectReason | ellipsis}}
                    <el-button type="text" @click="more(scope.row.rejectReason)" size="mini" v-if="scope.row.rejectReason && scope.row.rejectReason.length > 18">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='bidContent'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                  <div>
                    {{ scope.row.bidContent | ellipsis}}
                    <el-button type="text" @click="more(scope.row.bidContent)" size="mini" v-if="scope.row.bidContent && scope.row.bidContent.length > 18">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='budget'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                  <div>
                    {{ scope.row.budget | ellipsis}}
                    <el-button type="text" @click="more(scope.row.budget)" size="mini" v-if="scope.row.budget && scope.row.budget.length > 18">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='contractForm'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                  <div>
                    {{ scope.row.contractForm | ellipsis}}
                    <el-button type="text" @click="more(scope.row.contractForm)" size="mini" v-if="scope.row.contractForm && scope.row.contractForm.length > 18">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='contractingScope'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                  <div>
                    {{ scope.row.contractingScope | ellipsis}}
                    <el-button type="text" @click="more(scope.row.contractingScope)" size="mini" v-if="scope.row.contractingScope && scope.row.contractingScope.length > 18">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='qualification'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                  <div>
                    {{ scope.row.qualification | ellipsis}}
                    <el-button type="text" @click="more(scope.row.qualification)" size="mini" v-if="scope.row.qualification && scope.row.qualification.length > 18">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='remarks'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                  <div>
                    {{ scope.row.remarks | ellipsis}}
                    <el-button type="text" size="mini" @click="more(scope.row.remarks)" v-if="scope.row.remarks && scope.row.remarks.length > 18">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='rejectReason'" :prop="item.prop" :label="item.label" :min-width="item.width">
              <template slot-scope="scope">
                  <div>
                    {{ scope.row.rejectReason | ellipsis}}
                    <el-button type="text" size="mini" @click="more(scope.row.rejectReason)" v-if="scope.row.rejectReason && scope.row.rejectReason.length > 18">更多</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-else-if="item.type==='normal'" :prop="item.prop" :label="item.label" :min-width="item.width"></el-table-column>
          </tr>
          <el-table-column label="操作" :fixed="this.models.fixed" :width="this.models.width">
              <template slot-scope="scope">
                <el-button type="warning" v-if="scope.row.verify" size="mini" @click="verify(scope.row)">内勤审核</el-button>
                <el-button type="warning" v-if="scope.row.carryVerify" size="mini" @click="carryVerify(scope.row)">分管领导审核</el-button>
                <el-button type="warning" v-if="scope.row.sendVerify" size="mini" @click="sendVerify(scope.row)">总经理审核</el-button>
                <!---针对 采购员-->
                <el-button type="warning" v-if="scope.row.againVerify" size="mini" @click="againVerify(scope.row)">重新送审</el-button>
                <!---针对 内勤 分管领导-->
                <el-button type="warning" v-if="scope.row.againOtherVerify" size="mini" @click="againOtherVerify(scope.row)">重新送审</el-button>
                <el-button type="danger" v-if="scope.row.stop" size="mini" @click="stop(scope.row)">终止</el-button>
                <el-button type="danger" v-if="scope.row.del" size="mini" @click="del(scope.row)">删除</el-button>
                <el-button type="danger" v-if="scope.row.reject" size="mini" @click="reject(scope.row)">驳回</el-button>
                <el-button type="primary" v-if="scope.row.details" size="mini" @click="details(scope.row)">详情</el-button>
              </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-pagination
            class="page-footer"
            background
            layout="total,prev,pager,next,sizes,jumper"
            :total="this.models.total"
            :page-sizes="[10,20,30,40,50]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
          />
        </el-row>
        <el-dialog title="查看更多" :visible.sync="dialogVisible" width="30%">
          <div style="line-height: 22px;">{{contents}}</div>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import moment from 'moment'
  export default {
      props: {
          tableData: {
            type: Array,
            default: () => {
                return [];
            }
          },
          tableLabel:{
            type: Array,
            default: () => {
                return [];
            }
          },
          models: {
            type: Object,
            default: () => {
                return null;
            }
          },
      },
      data() {
          return {
            tis:"",
            ids:[],
            params: {
              type:"page",
              pageNum: 1,
              pageSize: 10
            },
            dialogVisible:false,
            contents:''
          };
      },
      filters: {
        ellipsis (value) {
            if (!value) return ''
            if (value.length > 18) {
                return value.slice(0,18) + '...'
            }
            return value
        }
      },
      mounted(){
        if(this.models.hackReset){
          this.$refs.table.clearSelection();
          this.ids = [];
          this.tis = "";
        }
      },
      methods: {
          formatDate(row, column) {
              const date = row[column.property]
              if (date == undefined) {
              return ''
              }
              return moment(date).format("YYYY-MM-DD")
          },
          formatDateTime(row, column){
            const date = row[column.property]
              if (date == undefined) {
              return ''
              }
              return moment(date).format("YYYY-MM-DD  HH:mm:ss")
          },
          more(content){
            this.contents = content;
            this.dialogVisible = true;
          },
          filePreview(row){
            if(!row.files){return;}
            var url = `${process.env.VUE_APP_FILE}${row.files}`
            var form = document.createElement('form');
            form.action = url;
            form.target = '_blank';
            form.method = 'get';
            document.body.appendChild(form);
            form.submit();
          },
          getRowKeys(row) {
            return row.id
          },
          handleSelectionChange(val) {
            let ids = [];
            val.forEach(item =>{ 
                ids.push(item)
            });
            this.ids = ids;
            this.tis="已选择 "+val.length+" 项";
            if(val.length==0){
              this.tis="";
              this.ids = [];
            }
            this.$emit("on-selection-click", this.ids);
          },
          verify(row){
            this.$emit("on-verify-click",row);
          },
          sendVerify(row){
            this.$emit("on-sendVerify-click",row);
          },
          carryVerify(row){
            this.$emit("on-carryVerify-click",row);
          },
          reject(row){
            this.$emit("on-reject-click",row);
          },
          stop(row){
            this.$emit("on-stop-click",row);
          },
          del(row){
            this.$emit("on-del-click",row);
          },
          add(row){
            this.$emit("on-add-click",row);
          },
          againVerify(row){
            this.$emit("on-againVerify-click",row);
          },
          againOtherVerify(row){
            this.$emit("on-againOtherVerify-click",row);
          },
          details(row){
            this.$emit("on-details-click",row);
          },
          sendPurchase(row){
            this.$emit("on-sendPurchase-click",row);
          },  
          handlePageChange(page) {
            this.params.pageNum = page;
            this.loadList();
          },
          handleSizeChange(page) {
            this.params.pageSize = page;
            this.loadList();
          },
          loadList() {
            this.$emit("on-search-click", this.params);
          },
          onClose() {
            this.$emit("on-cancel");
          }
      }
  };
  </script>
  
  